<template>
    <div class="page">
        <div class="Header FontSize_Title" @click.self="GameInstructionsPopup">
            <!-- 游戏说明 <sup>!</sup> -->
            <!-- 自定义游戏说明弹窗 -->
            <div class="GameInstructions" v-if="PopupHidden" @click.self="BackpackItemPopupClick">
                <span class="FontSize_Title span" @click="KongzhiColse">X</span>
                <div class="FontSize_text GameInstructionsBox">
                    <div class="GameInstructionsLeft" @click.self="BackpackItemPopupClick">
                        <div class="GameInstructionsLeftBox" @click="GameInstructions(1)"
                            :class="GameInstructionsHidden == 1 ? 'GameInstructionsLeftBoxStyle' : ''">
                            说明</div>
                        <div class="GameInstructionsLeftBox" @click="GameInstructions(2)"
                            :class="GameInstructionsHidden == 2 ? 'GameInstructionsLeftBoxStyle' : ''">设置</div>
                        <div class="GameInstructionsLeftBox" @click="GameInstructions(3)"
                            :class="GameInstructionsHidden == 3 ? 'GameInstructionsLeftBoxStyle' : ''">修仙等级</div>
                        <div class="GameInstructionsLeftBox" @click="GameInstructions(4)"
                            :class="GameInstructionsHidden == 4 ? 'GameInstructionsLeftBoxStyle' : ''">物品图鉴</div>
                        <div class="GameInstructionsLeftBox" @click="GameInstructions(5)"
                            :class="GameInstructionsHidden == 5 ? 'GameInstructionsLeftBoxStyle' : ''">职业详情</div>
                    </div>
                    <div class="GameInstructionsRight">
                        <div v-if="GameInstructionsHidden == 1" class="Mode1">
                            <div class="Mode1Box">
                                <ul class="FontSize_text">
                                    <li>采集物资/建造/摧毁/探索/生成物资都将消耗饱食度</li>
                                    <li>补签会扣除八百灵石</li>
                                    <li>七日签到每周一凌晨00:00重置,若您刚好在更新时间段在线,请手动刷新才能看到新数据</li>
                                    <li>随机事件和商店都是每十分钟触发一次</li>
                                    <li>所有物品（丹药、书籍、药草）按照品质分为普通、良品和优秀</li>
                                    <li>炼丹成功率与炼丹师境界相关，炼制相同境界丹药的成功概率是80%不能炼制高境界丹药，炼制低境界丹药成功率100%</li>
                                    <li>同一种丹药炼制不同品质的成功率分别是：普通当品质为当前的炼丹率（80%~100%）,良品概率为(40%~50%),优秀概率为(16%~20%)</li>
                                    <li>相同物品的数量不能超过99，一旦到达99,获取将不会在获取到同一类型物品</li>
                                    <li>首次种植会消耗种子，种植可能失败可能成功，种植成功收获一颗草药，且成熟的草药到达物品上线的时候将会停止耕作</li>
                                    <li>当网页刷新的时候请会重置所有的倒计时，刷新时请谨慎，必要的时候请点击保存，保存功能只会保存种田的时间</li>
                                </ul>
                            </div>
                        </div>
                        <div v-if="GameInstructionsHidden == 2">
                            <button @click="SetttingMusic" class="FontSize_word" :key="Main.MP3">音乐：{{
                                GetMusic() ?
                                GetMusic().split("-"[0]) == "play" ?
                                    '开' : "关" : "系统错误" }}</button>
                            <button @click="Quit" class="FontSize_word"> 退出游戏</button>
                            <button class="FontSize_word" @click="Quit1">全屏设置:{{ Main.Screen == 1 ? "开" : "关" }}</button>
                            <button class="FontSize_word" @click="CDKEY">兑换码</button>
                        </div>
                        <div v-if="GameInstructionsHidden == 3" style="height:100%">
                            <div class="FontSize_word GameDateilsHidden">
                                <div class="GameDateilsHiddenBox">
                                    <div class="GameDateilsHiddenBoxFot" v-for=" item  in  Main.Realm " :key="item.realmId">
                                        <div class="marginBottom1">
                                            <span calss="FontSize_Title">境界： {{ item.realmName }}</span>
                                        </div>
                                        <div class="FontSize_text GameDateilsHiddenBoxFotTotal">
                                            <span class="GameDateilsHiddenBoxFotTitle">累增攻击： {{ item.aTK }}</span>
                                            <span class="GameDateilsHiddenBoxFotTitle">累增防御： {{ item.dEF }}</span>
                                            <span class="GameDateilsHiddenBoxFotTitle">累增血量： {{ item.hP }}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div v-if="GameInstructionsHidden == 4" style="height:100%">
                            <div class="ItemCodex" @click.self="BackpackItemPopupClick">
                                <div class="ItemCodexHeat FontSize_text" @click.self="BackpackItemPopupClick">
                                    搜索：<input type="text" class="" placeholder="输入关键字查询图片" @click="BackpackItemPopupClick"
                                        @input="ItemCodexSelect" v-model="ItemCodexSelectTitle">
                                </div>
                                <div class="CustomBackpackBoxHeaderContent" @click.self="BackpackItemPopupClick">
                                    <div class="CustomBackpackBoxHeaderContentBox" @click.self="BackpackItemPopupClick">
                                        <div class="CustomBackpackBoxHeaderContentBoxConenten"
                                            :class="!Main.MozillaText ? '' : 'overflowHidden'"
                                            @click.self="BackpackItemPopupClick">
                                            <div
                                                class="GirdBackpack_XXXL GirdBackpack_XXL GirdBackpack_XL GirdBackpack_X FontSize_text">
                                                <div v-for="(item, index) in MainItemList" class="BackpackItemBox"
                                                    @click="BackpackDetails(item, index)"
                                                    :class="BackpackDetailsIndex == index ? 'BorderColor' : ''">
                                                    <div style="text-align: center;
                                                    padding: 4px;
                                                    height: 100%;
                                                    overflow: hidden;
                                                    box-sizing: border-box;"
                                                        :class="item.itemEvaluate == 1 ? '' : item.itemEvaluate == 2 ? 'Color2' : item.itemEvaluate == 3 ? 'Color3' : ''">
                                                        {{ item.itemName }}</div>
                                                </div>
                                            </div>

                                            <!-- 物品详情弹窗 -->
                                            <div class="FontSize_text BackpackItemPopup" v-if="BackpackItemPopupHidden"
                                                @click="BackpackItemPopupClick">
                                                <div class="Title marginBottom1"
                                                    :class="items.itemEvaluate == 1 ? '' : items.itemEvaluate == 2 ? 'Color2' : items.itemEvaluate == 3 ? 'Color3' : ''">
                                                    {{ items.itemName }}</div>
                                                <div class="marginBottom1">{{ items.itemSell == 1 ? "可出售" : "不可出售" }}</div>
                                                <div class="Title">{{ items.itemDetails }}</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div v-if="GameInstructionsHidden == 5" style="height:100%">
                            <div class="FontSize_text Profession">
                                <div class="" v-for="item in Main.profession">
                                    <div class="ProfessionBox">
                                        <p :title="item.professionDetails" class="ProfessionBoxTitle"
                                            @click="ProfessionPopup(item)">{{ item.professionName
                                            }}</p>
                                        <p>{{ item.professionDetails }}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <main style="width:100%">
            <div class="figure marginBottom3">
                <div class="marginBottom1" style="text-align:center">
                    <span class="FontSize_Title">
                        {{ Main.Character.nickname }}
                    </span> <sup class="FontSize_text">({{
                        Main.Character.realmChildren.realmName }})</sup>
                    <button @click.self="GameInstructionsPopup">游戏说明</button>
                </div>
                <div
                    class="FontSize_Text figureSh GirdProperty_XL GirdProperty_X GirdProperty_XXL GirdProperty_XXXL marginBottom2">
                    <span>功能：<span style="cursor: pointer;color:aqua;" @click="Backpack">浏览</span></span>
                    <span>七日签到：<span style="cursor: pointer;color:aqua;" @click="signIn">查看</span></span>

                    <span>职业：<span style="cursor: pointer;color:aqua;" @click="OccupationSee">查看</span></span>
                    <span>账户：{{
                        Main.Character.uID }}</span>
                    <span>灵石：{{ Main.Character.money }}</span>
                    <span>攻击：{{
                        Main.Character.aTK }}</span>
                    <span>防御：{{
                        Main.Character.dEF }}</span>
                    <span>血量：{{
                        Main.Character.hP }}</span>
                    <span>天赋值：{{
                        Main.Character.talent }}</span>

                    <span>突破概率：{{
                        Main.Character.breakthrough }}%</span>
                    <span>饱食度：{{
                        Main.Character.satiety }}</span>
                </div>

                <div class="figureSh" style="text-align: center;">
                    <div>
                        <button class="FontSize_word" :disabled="!(Main.Character.eXP >= Main.Character.realmChildren.eXP)"
                            @click="ClickBreakthrough">突破</button>
                    </div>
                    <div>
                        <button class="FontSize_word"
                            :disabled="!Main.Character.experienceLine > 0 || Main.Character.eXP == Main.Character.realmChildren.eXP"
                            @click="ExtraExperience">使用额外经验 </button>
                    </div>
                </div>
            </div>
            <div class="marginBottom3 Experience">
                <div class="FontSize_text marginBottom3">
                    <span>当前经验为：{{ Main.Character.eXP }}/{{ Main.Character.realmChildren.eXP
                    }}</span><span>，每分钟增加<span style="color:rgb(11, 19, 232);">{{
    Main.Character.realmChildren.timeExp }}</span>经验</span>
                    <div>
                        <span>{{ Main.timerExpTime }}秒钟之后增加
                            <span style="color:rgb(11, 19, 232);">{{
                                Main.Character.realmChildren.timeExp }}</span>
                            经验</span><br>
                        <span v-if="!Main.EXPFlag" style="color:red">经验到达上线</span>

                    </div>
                </div>
                <div>
                    <div id="yin-yang">
                        <div class="semicircle"></div>
                        <span class="heartTtile FontSize_word">{{ Main.Character.experienceLine }}/{{
                            Main.Character.realmChildren.expPool }}
                            <br /><span class="FontSize_word">额外经验池</span>
                        </span>
                        <div class="heartColor"></div>
                    </div>

                </div>
            </div>
            <!-- <div class="turntable_big">
                <div class="turntable_small">
                    <div class="sector">
                        <div class="sector-inner">
                            <span>谢谢参与</span>
                        </div>
                    </div>
                 <div class='slice'> 13</div>
                    <div class='slice'> </div>
                    <div class='slice'>12 </div>
                    <div class='slice'> 12</div>
                    <div class='slice'> 12</div> 
            <div class="turntable_content">抽奖</div>
    </div>
    </div>
    <canvas canvas-id="canvasId" id="canvasId" /> -->

        </main>
        <!-- 页面加载弹窗 -->
        <!-- <Zky_Loading v-model:hidden="Loging"></Zky_Loading> -->
        <!-- 签到弹窗 -->
        <Zky_BackpackPopup v-model:hidden="SignInPopup" :titleHidden="false" :FoorthHidden="false">
            <div class="SignInPopupBox">
                <div class="SignInPopupBoxTotal FontSize_text">
                    <div class="SignInPopupInformation ">
                        <div class="SignInPopupInformationBox " v-for="item in Main.SignIn.attendances" :key="item.uid">
                            <!-- {{ item }} -->
                            <div class="marginBottom1">{{ item.attendanceName }}*{{ item.attendanceNum }}</div>
                            <div>

                                <button class="FontSize_text" v-if="item.attendanceType == 1 && item.attendanceUse == 1"
                                    @click="Punch(item, 1)">签到</button>
                                <button class="FontSize_text" v-if="item.attendanceType == 2 && item.attendanceUse == 1"
                                    @click="Punch(item, 2)">补签</button>
                                <span v-if="item.attendanceUse == 2">签到成功</span>
                                <span v-if="item.attendanceType == 3">时间未到</span>
                            </div>
                        </div>
                        <div class="SignInPopupInformationRen">
                            <div class="SignInPopupInformationRenName">
                                <div>{{ ShopNpc.npcName }}</div>
                            </div>
                            <div class="SignInPopupInformationRenXn">
                                {{ ShopNpc.likability }}/{{ ShopNpc.totalLikability }}
                                <div>
                                    <button class="FontSize_text" @click="Promote(ShopNpc, '道具', '背包中没有道具')">提升好感</button>
                                </div>
                            </div>
                            <div class="SignInPopupInformationRenD">
                                {{ ShopNpc.discourse[0] }}
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </Zky_BackpackPopup>
        <!-- 个人职业弹窗 -->
        <Zky_BackpackPopup v-model:hidden="OccupationPopup" :titleHidden="false" :FoorthHidden="false">
            <div class="FontSize_text">
                <div class="" v-for="(item, index) in Main.Character.profession" :item="item.professionId">
                    <div>
                        <p v-if="item.professionBranch">
                            {{ item.professionName }}({{ item.professionBranch[0].occupationName }})
                            <span>({{ item.professionExp }}/{{ item.professionBranch[0].occupationEXP }})</span>
                            <button class="FontSize_text" style="background:#aaa;margin:0px"
                                v-if="item.professionExp >= item.professionBranch[0].occupationEXP"
                                @click="AlchemyBreakthrough(item, index + 1)">突破</button>
                            <button class="FontSize_text" style="background:#aaa;margin:0px"
                                @click="Unlock1('书籍', '背包中没有书籍', index)"
                                v-if="item.professionExp < item.professionBranch[0].occupationEXP">学习</button>
                        </p>
                        <p v-else>
                            <span>{{ item.professionName }}（状态：未入门）</span>
                            <button class="FontSize_text" style="background:#aaa;"
                                @click="Unlock('书籍', '背包中没有书籍', index)">学习</button>
                        </p>
                    </div>
                </div>

            </div>
        </Zky_BackpackPopup>
        <!-- 等级突破显示弹窗 -->
        <Zky_Popup v-model:hidden="BreakthroughLv" :titleHidden="false" :CancelHidden="false" :FoorthHidden="false"
            :overflowhidden="!Main.MozillaText">
            <div class="FontSize_word GameDateilsHidden ">
                <div class="marginBottom3">{{ wordTitle }}</div>
                <div class="FontSize_word" style="text-align:center">{{ ReakthroughWord }}</div>
            </div>
        </Zky_Popup>
        <Zky_Popup v-model:hidden="QuitGame" :title="'退出账户'" :Confirm="QuitGameConfirm" :overflowhidden="true">
            <div>
                退出之后，将保留游戏数据，并返回到游戏主页
            </div>
        </Zky_Popup>
        <Zky_Popup v-model:hidden="ProfessionPopuphidden" :title="ProfessionPopupTitle" :overflowhidden="true"
            :ConfirmlHidden="false">
            <div v-for="item in ProfessionPopupDetails"
                style="border-bottom: 1px dashed #fff;padding-bottom:8px;margin-bottom:8px">
                <div>等级：{{ item.occupationName }}</div>
                <div>升级所需经验：{{ item.occupationEXP }}</div>
                <div>描述：{{ item.occupationDetails }}</div>
            </div>
        </Zky_Popup>
        <!-- 物品弹窗 -->
        <Zky_BackpackPopup v-model:hidden="BackpackPopup" :titleHidden="false" :FoorthHidden="false">
            <div class="Item GirdBackpack_XXXL GirdBackpack_XXL GirdBackpack_XL GirdBackpack_X">
                <div class="ItemBox" @click="OpenBackpack"> <img src="../../assets/SVG/backpack.svg" alt="背包" title="背包">
                    <p class="FontSize_text">背包</p>
                </div>
                <div class="ItemBox" @click="Cropland"> <img src="../../assets/SVG/农田.svg" alt="农田" title="农田">
                    <p class="FontSize_text">农田</p>
                </div>
                <div class="ItemBox" @click="SHop"> <img src="../../assets/SVG/Shop.svg" alt="商店" title="商店">
                    <p class="FontSize_text">商店</p>
                </div>
                <div class="ItemBox" @click="Censer"> <img src="../../assets/SVG/Censer.svg" alt="香炉" title="香炉">
                    <p class="FontSize_text">炼丹炉</p>
                </div>
                <div class="ItemBox" @click="MapInformation"> <img src="../../assets/SVG/Map.svg" alt="地图" title="地图">
                    <p class="FontSize_text">地图</p>
                </div>
                <div class="ItemBox" @click="SurviveChange"> <img src="../../assets/SVG/survive.svg" alt="家" title="生存">
                    <p class="FontSize_text">家</p>
                </div>
            </div>
        </Zky_BackpackPopup>
        <!-- 兑换码弹窗 -->
        <Zky_BackpackPopup v-model:hidden="CDKEYPopup" :titleHidden="false" :FoorthHidden="false">
            <div class="CDKEYStyle">
                <input type="text" placeholder="请输入兑换码" class="FontSize_text" v-model="cdkeyId"> <button
                    class="FontSize_text" @click="RedeemCode">兑换</button>
            </div>
        </Zky_BackpackPopup>
        <!-- 兑换码/获得物品奖励弹窗 -->
        <Zky_BackpackPopup v-model:hidden="CDKEYRewardsPopup">
            <div class="CDKEYRewardsStyle GirdCropland_XXXL GirdCropland_XXL GirdCropland_XL GirdCropland_X">
                <div v-for="item in CDKEYRewardsList">
                    <span
                        :class="item.itemEvaluate == 1 ? '' : item.itemEvaluate == 2 ? 'Color2' : item.itemEvaluate == 3 ? 'Color3' : ''">{{
                            item.itemName }}</span>*<span>{{ item.itemNum }}</span>
                </div>
            </div>
        </Zky_BackpackPopup>
        <!-- 自定义商店弹窗 -->
        <div v-if="ShopPopup" class="DIYShop" @click.self="CloseShop">
            <div class="ShopBox">
                <div class="ShopBoxContent">
                    <div class="ShopBoxContentHeader marginBottom1 DisplayBlock_X FontSize_text">
                        <div class="marginBottom1">{{ SHopTimeTilte }}后刷新</div>
                        <div class="marginBottom1 Sell">
                            <span style="margin-right:6px;" v-if="ShopItem.itemNum" @click="Purchase">购买</span><span
                                @click="SellShop">出售</span>
                        </div>
                    </div>
                    <div class="ShopBoxMain" :key="ShopRefreshFlag">
                        <div class="" v-if="Main.shop.item.length > 0">
                            <div
                                class="GirdCropland_XXXL GirdCropland_XXL GirdCropland_XL GirdCropland_X FontSize_text ShopBoxMainBox marginBottom2">
                                <div v-for="(item, index) in  Main.shop.item " :key="index" class="ShopItem"
                                    @click="SelectShopItem(item)" :class="ShopItem.index == index ? 'ShopItemColor' : ''">
                                    <div class="ShopItemName marginBottom1"
                                        :class="item.itemEvaluate == 1 ? '' : item.itemEvaluate == 2 ? 'Color2' : item.itemEvaluate == 3 ? 'Color3' : ''">
                                        {{ item.itemName }}
                                        <span class="ShopItemNum">{{ item.itemNum }}
                                        </span>
                                    </div>
                                    <div class="ShopItemPrice">{{ item.itemMoney }}</div>
                                </div>
                            </div>
                        </div>
                        <div v-else class="FontSize_Title">
                            商店暂无商品
                        </div>
                    </div>
                </div>
            </div>
            <!-- 购买商品弹窗 -->
            <Zky_BackpackPopup v-model:hidden="ShopPurchase" :titleHidden="false" :FoorthHidden="false">
                <div class="ShopItemDateils FontSize_text">
                    <div class="ShopItemDateilsLeft">
                        <div class="marginBottom1 ShopItemDateilsName"
                            :class="ShopItem.itemEvaluate == 1 ? '' : ShopItem.itemEvaluate == 2 ? 'Color2' : ShopItem.itemEvaluate == 3 ? 'Color3' : ''">
                            {{ ShopItem.itemName }}
                        </div>
                        <div class="ShopItemDateilsDetails">
                            <div class="ShopItemDateilsDetailsChildren">
                                {{ ShopItem.itemDetails }}
                            </div>
                        </div>
                    </div>
                    <div class="ShopItemDateilsRight">
                        <p>
                            灵石数：{{ Main.Character.money }}
                        </p>
                        <p class="marginBottom1">
                            商品价格：{{ ShopItem.price * ShopItem.itemMoney }}
                        </p>
                        <div class="ShopItemDateilsBut marginBottom1">
                            <span @click="ItemReduce">-</span> <span class="ShopItemDateilsButNum">{{ ShopItem.price
                            }}</span>
                            <span @click="ItemAdd">+</span>
                        </div>
                        <div style="text-alight:left;">
                            <button class="FontSize_word" style="background:#999;width:90%;margin:0;" @click="ShopBuy">
                                购买
                            </button>
                        </div>
                    </div>
                </div>
            </Zky_BackpackPopup>

        </div>
        <!-- 农田弹窗 -->
        <Zky_BackpackPopup v-model:hidden="CroplandPopup" :titleHidden="false" :FoorthHidden="false">
            <div class="croplandPopup">
                <div class="croplandPopupTotal">
                    <div class="croplandPopupBox">
                        <div class="GirdCropland_X GirdCropland_XL GirdCropland_XXXL GirdCropland_XXL FontSize_text">
                            <div v-for="(item, index)  in  Main.croplands " :key="item.croplandId" class="cropland">
                                <div class="croplandMain">{{ item.croplandName }}</div>
                                <div class="croplandMain" v-if="item.croplandType == 1">{{ "未解锁" }}</div>
                                <div class="croplandMain" v-if="item.croplandType == 1">价格：{{ item.price }}</div>
                                <button class="croplandMain FontSize_word" v-if="item.croplandType == 1"
                                    @click="BuyCropland(item)">购买</button>
                                <div class="croplandMain" v-if="item.croplandType == 2 && item.itemId == null">未耕种
                                </div>
                                <div class="croplandMain" v-if="item.croplandType == 2 && item.itemId != null">{{
                                    item.name }}
                                </div>
                                <button class="croplandMain FontSize_word"
                                    v-if="item.croplandType == 2 && item.itemId == null"
                                    @click="SelectSeed('种子', '您的背包中没有种子', item)">选择种子</button>
                                <!-- <div class="croplandMain" v-if="item.croplandType == 2 && item.itemId != null">{{ item.itemChildren }}
                                </div> -->
                                <div class="croplandMain" v-if="item.croplandType == 2 && item.itemId != null">{{
                                    item.timeTitle
                                }}收获
                                </div>
                                <button class="croplandMain FontSize_word"
                                    v-if="item.croplandType == 2 && item.itemId != null" @click="StopSeed(index)">{{
                                        item.flag ? "停止种植" : "重新种植" }}</button>
                                <button class="croplandMain FontSize_word"
                                    v-if="item.croplandType == 2 && item.itemId != null"
                                    @click="SelectSeed('种子', '您的背包中没有种子', item)">更换种子</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>



        </Zky_BackpackPopup>
        <!--  使用物品弹窗 -->
        <Zky_BackpackPopup v-model:hidden="ItemUsePopup" :titleHidden="false" :FoorthHidden="false">
            <div v-if="ItemUseList.length > 0" style="height:80vh">
                <div class="ItemUsePopupBox">
                    <div class="ItemUsePopup">
                        <div class="GirdBackpack_XXXL GirdBackpack_XXL GirdBackpack_XL GirdBackpack_X FontSize_text ">
                            <div v-for="item in ItemUseList" class="ItemUsePopupChildren">
                                <div style="text-align: center;padding:4px" class="Name"
                                    :class="item.itemEvaluate == 1 ? '' : item.itemEvaluate == 2 ? 'Color2' : item.itemEvaluate == 3 ? 'Color3' : ''">
                                    {{ item.itemName }}
                                </div>
                                <div class="" style="text-align: center;padding:4px">数量： {{ item.itemNum
                                }}</div>
                                <div class="Use" @click="UseSeed(item)">使用</div>
                            </div>

                        </div>
                    </div>

                </div>
            </div>
            <div v-else class="FontSize_Title">
                {{ ItemUseError }}
            </div>
        </Zky_BackpackPopup>
        <!-- 自定义背包内容弹窗 -->
        <div class="CustomBackpack" v-if="CustomBackpackHidden" @click.self="CloseCustomBackpack">
            <div class="CustomBackpackBox">
                <div class="CustomBackpackBoxHeader DisplayBlock_X FontSize_text">
                    <span class=" DisplayBlock_X marginBottom1">背包中有{{ Main.Character.itemDetails.length
                    }}件物品</span>
                    <label class=" DisplayBlock_X  marginBottom1">搜索：<input type="text" placeholder="输入搜索名称"
                            v-model="itemDetailsTitle" @input="itemDetailsnavigation"></label>
                </div>
                <div class="CustomBackpackBoxHeaderContent" @click.self="BackpackItemPopupClick">
                    <div class="CustomBackpackBoxHeaderContentBox" @click.self="BackpackItemPopupClick">
                        <div v-if="Main.Character.itemDetails.length > 0" style="height:100%;overflow: hidden;">
                            <div style="height: 100%;width: 100%;overflow-y:auto;" @click.self="BackpackItemPopupClick">
                                <div class="GirdBackpack_XXXL GirdBackpack_XXL GirdBackpack_XL GirdBackpack_X CustomBackpackBoxHeaderContentBoxConenten"
                                    @click.self="BackpackItemPopupClick">
                                    <div v-for="(item, index) in  itemDetails " class="BackpackItemBox"
                                        @click.self="BackpackDetails(item, index)"
                                        :class="BackpackDetailsIndex == index ? 'BorderColor' : ''">
                                        <div style="text-align: center;padding:4px" class="Name FontSize_text"
                                            @click.self="BackpackDetails(item, index)">
                                            <span @click.self="BackpackDetails(item, index)"
                                                :class="item.itemEvaluate == 1 ? '' : item.itemEvaluate == 2 ? 'Color2' : item.itemEvaluate == 3 ? 'Color3' : ''">{{
                                                    item.itemName }}</span>
                                            <span class="span" @click.self="BackpackDetails(item, index)">{{
                                                item.itemNum
                                            }}</span>
                                            <span class="Use" v-if="BackpackDetailsIndex == index && item.itemNum >= 0"
                                                @click="UseShop(item)">使用</span>
                                        </div>
                                    </div>
                                    <!-- 物品详情弹窗 -->
                                    <div class="FontSize_text BackpackItemPopup" v-if="BackpackItemPopupHidden"
                                        @click="BackpackItemPopupClick">
                                        <div class="Title marginBottom1"
                                            :class="items.itemEvaluate == 1 ? '' : items.itemEvaluate == 2 ? 'Color2' : items.itemEvaluate == 3 ? 'Color3' : ''">
                                            {{ items.itemName }}</div>
                                        <div class="marginBottom1">{{ items.itemSell == 1 ? "可出售" : "不可出售" }}</div>
                                        <div class="Title">{{ items.itemDetails }}</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div v-else class="FontSize_Title" style="height:100% overflow: hidden;">
                            背包中暂无物品
                        </div>
                    </div>
                </div>
                <div class="CustomBackpackBoxFooter FontSize_word">
                    <div class="CustomBackpackBoxFooterBox">
                        <button :class="itemDetailsType == '全部' ? 'buttonColor' : ''"
                            @click="ItemTypeSelect('全部')">全部</button>
                        <button @click="ItemTypeSelect('丹药')"
                            :class="itemDetailsType == '丹药' ? 'buttonColor' : ''">丹药</button>
                        <button @click="ItemTypeSelect('草药')"
                            :class="itemDetailsType == '草药' ? 'buttonColor' : ''">草药</button>
                        <button @click="ItemTypeSelect('书籍')"
                            :class="itemDetailsType == '书籍' ? 'buttonColor' : ''">书籍</button>
                        <button @click="ItemTypeSelect('道具')"
                            :class="itemDetailsType == '道具' ? 'buttonColor' : ''">道具</button>
                        <button @click="ItemTypeSelect('地图')"
                            :class="itemDetailsType == '地图' ? 'buttonColor' : ''">地图</button>
                        <button @click="ItemTypeSelect('消耗')"
                            :class="itemDetailsType == '消耗' ? 'buttonColor' : ''">消耗品</button>
                        <button @click="ItemTypeSelect('工具')"
                            :class="itemDetailsType == '工具' ? 'buttonColor' : ''">工具</button>

                    </div>
                </div>

            </div>
        </div>
        <!-- 自定义出售弹窗 -->
        <div class="SellShopPopup" v-if="SellShopPopup" @click.self="SellShopPopupClose">
            <div class="SellShopPopupBox">
                <div class="SellShopPopupMain FontSize_text">
                    <div class="SellShopPopupModel1">
                        <div class="SellShopPopupModel1Box">
                            <div v-if="SellShopList.length > 0">
                                <div v-for="item in SellShopList">
                                    <div class="SellShop FontSize_text marginBottom1">
                                        <p
                                            :class="item.itemEvaluate == 1 ? '' : item.itemEvaluate == 2 ? 'Color2' : item.itemEvaluate == 3 ? 'Color3' : ''">
                                            {{ item.itemName }}</p>
                                        <p>拥有： {{ item.itemNum }}</p>
                                        <p> 价格：{{ item.itemMoney }}</p>
                                        <p><span class="SellShopNum Widht_X marginBottom1"><span
                                                    @click="SellShopDecrease(item)">-</span><span contenteditable
                                                    @input="text($event, item)">{{
                                                        item.num }}</span><span @click="SellShopAdd(item)">+</span></span>
                                            <button class="FontSize_text DisplayBlock_X"
                                                @click="SellShopButton(item)">出售</button>

                                        </p>
                                        <p> {{ item.itemDetails }}</p>
                                    </div>
                                </div>
                            </div>
                            <div v-else>
                                背包中暂无商品出售
                            </div>
                        </div>
                    </div>
                    <div class="SellShopPopupModel2 " @click.self="SellShopPopupClose">
                        <div>
                            <p>&lt;</p>
                            <p>></p>
                        </div>
                    </div>
                    <div class="SellShopPopupModel1">
                        <div class="SellShopPopupModel1Box">
                            <div class="FontSize_text">
                                <p>出售金额：{{ SellTotalMoney }}</p>
                                <p>出售数量：{{ SellTotalNum }}</p>
                                <button class="FontSize_word" @click="ConfirmSell">确认出售</button>
                            </div>
                            <div v-if="SellShopPrepareList.length > 0">
                                <div v-for="item in SellShopPrepareList">
                                    <div class="SellShop FontSize_text marginBottom1">
                                        <p
                                            :class="item.itemEvaluate == 1 ? '' : item.itemEvaluate == 2 ? 'Color2' : item.itemEvaluate == 3 ? 'Color3' : ''">
                                            {{ item.itemName }}</p>
                                        <p>出售： {{ item.itemNum }}</p>
                                        <p>价格：{{ item.itemMoney }}</p>
                                        <p><span class="SellShopNum Widht_X marginBottom1"><span
                                                    @click="SellShopDecrease(item)">-</span><span contenteditable
                                                    @input="text($event, item)">{{
                                                        item.num }}</span><span @click="SellShopAdd(item)">+</span></span>
                                            <button class="FontSize_text DisplayBlock_X"
                                                @click="SellShopCancelButton(item)">取消</button>

                                        </p>
                                        <p> {{ item.itemDetails }}</p>
                                    </div>
                                </div>
                            </div>
                            <div v-else>
                                暂时还没有商品准备出售
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 炼丹弹窗 -->
        <div class="alchemy" v-if="AlchemyPopup">
            <img src="../../assets/lian.jpg" alt="" @click.self="AlchemyPopupClose">
            <div class="alchemyBox FontSize_Title">
                <header class="marginBottom1">{{ Main.Character.elixir.itemId ?
                    Main.Character.elixir.itemChildren.itemName
                    : "未选择草药"
                }}</header>

                <div style="" class="SelectAlchemy marginBottom1" @click="SelectAlchemy"> 选择炼制丹药</div>
                <div class="SelectAlchemy marginBottom1" v-if="Main.Character.elixir.itemId">{{
                    Main.Character.elixir.itemChildren.itemDetails }}</div>

                <div class="SelectAlchemy marginBottom1" v-if="Main.Character.elixir.itemId">
                    {{ Main.Character.elixir.successRate }}%概率成功</div>
                <div class="SelectAlchemy marginBottom1" v-if="Main.Character.elixir.itemId">{{
                    ElixirTitle }}后炼制完成
                </div>
                <div class="SelectAlchemy marginBottom1" v-if="Main.Character.elixir.itemId">
                    <button class="FontSize_Title" v-if="Main.Character.elixir.elixirStatus" @click="AlchemyStop(false)">
                        暂停炼丹</button>
                    <button class="FontSize_Title" v-if="!Main.Character.elixir.elixirStatus" @click="AlchemyStop(true)">
                        开始炼丹</button>
                </div>
                <div class="SelectAlchemy marginBottom1" v-if="Main.Character.elixir.itemId && ElixirFlag != 1">
                    {{ ElixirFlag == 2 ? " 所炼制丹药的草药不足" : ElixirFlag == 3 ? "暂停炼药中" :
                        "所炼制丹药的数量到达上线" }}</div>

            </div>
        </div>
        <!-- 选择丹药弹窗 -->
        <Zky_BackpackPopup v-model:hidden="SelectAlchemyPopup" :titleHidden="false" :FoorthHidden="false">
            <div class="SelectAlchemyPopup">
                <div class="SelectAlchemyPopupBox">
                    <!-- AlchemyList -->
                    <div v-for="item in AlchemyList" class="marginBottom1" style="cursor:pointer"
                        @click="SelectAlchemyConfirm(item)">
                        {{ item.name }}
                    </div>
                </div>
            </div>
        </Zky_BackpackPopup>

        <!-- 自定义地图模拟数据 -->
        <div class="MapInformationPopup" v-if="MapInformationPopup">
            <MapUse v-model:hidden="MapInformationPopup"></MapUse>
        </div>
        <!-- 自定义求生数据 -->
        <div class="MapInformationPopup" v-if="SurvivePopup">

            <SurviveUse v-model:hidden="SurvivePopup"></SurviveUse>
        </div>
        <!-- 随机事件弹窗 -->
        <Zky_Popup v-model:hidden="IncidentPopup" :title="IncidentTitle" :overflowhidden="true" :ConfirmlHidden="false">
            <p>{{ IncidentWord }}</p>
            <p>{{ IncidentRewards }}</p>
        </Zky_Popup>

    </div>
</template>

<script setup>
import { main } from "../../store"
import Alert from "../../components/Com/Alert/index"
import { ref, onMounted, onBeforeUnmount, nextTick, watch } from "vue"
import Axios from "../../Axios";
import { GetMusic, SetMusic, ClearToken } from "../../utils/Token"
import { TimeLength } from "../../utils/Time"
import { useRouter } from "vue-router"
import MapUse from "./map.vue"
import SurviveUse from "./survive.vue"
const router = useRouter()
const Main = main()
const Loging = ref(true) // 控制加载弹窗显示
const OccupationPopup = ref(false) // 控制个人职业弹窗显示
const TotalwidthHeart = ref("0px") // 控制经验池宽高
const widthborder = ref("0px")  // 控制经验池边框
const widthHeart = ref("0px")  // 控制经验池小圈的宽高
const widthHeart1 = ref("0px")  // 控制经验池距离边界的距离
const widthHeart2 = ref("0px")
const Heightwindow = ref("0px") // 
const BreakthroughLv = ref(false) // 控制突破等级弹窗显示
const wordTitle = ref("") //突破弹窗文字描述
const timerReakthrough = ref(null) //突破弹窗计时器
const BackpackPopup = ref(false)   //  控制背包弹窗的显示
const BackpackDetailsIndex = ref(null)   //  用于高亮显示背包物品详情
const BackpackItemPopupWidht = ref("0px")
const BackpackItemPopupLeft = ref("0px")
const BackpackItemPopupTop = ref("0px")
const BackpackItemPopupHidden = ref(false) // 控制物品说明弹窗的显示
const CustomBackpackHidden = ref(false) // 控制自定义弹出的显示
const GameInstructionsHidden = ref(1)  // 控制去换显示
const PopupHidden = ref(false) // 控制文字说明弹窗显示
const QuitGame = ref(false) // 控制退出游戏弹窗显示
const ProfessionPopuphidden = ref(false) // 控制职业详情弹窗显示
const ProfessionPopupTitle = ref("") // 控制职业详情弹窗头部
const ProfessionPopupDetails = ref([]) // 控制职业详情弹窗数据
const CroplandPopup = ref(false) // 控制农田弹窗显示 
const ShopPopup = ref(false) // 控制商店弹窗的显示
const SHopTimeTilte = ref(0) //商店定时器当前倒计时秒数
const SHopTimeTimer = ref(null) // 控制商店定时器开关
const ShopItem = ref({})  // 被选中的商店商品
const ShopPurchase = ref(false) // 购买商品弹窗
const itemDetails = ref([])  //获取用户背包数据
const itemDetailsType = ref("全部")  //当前用户背包物品类型
const itemDetailsTitle = ref("")  //当前用户背包搜索框名称
const ItemUsePopup = ref(false)  // 控制物品使用弹窗显示
const ItemUseList = ref([])  // 被使用的同一种类型物品数据
const ItemUseError = ref("") // 用于当没有需要的物品时显示的文本
const ItemUseFlag = ref(true) // 防止使用物品多次点击
const UseCropland = ref({}) // 需要被种植的农田
const SellShopPopup = ref(false) // 控制出售弹窗的显示
const SellShopList = ref([]) // 物品出售数组，由于显示需要出售的物品
const SellShopPrepareList = ref([]) // 物品出售数组，由于显示准备出售的物品
const SellTotalMoney = ref(0)  // 当前出售物品总价格
const SellTotalNum = ref(0)  // 当前出售物品总价格
const MainItemList = ref([])  // 图鉴信息数据
const ItemCodexSelectTitle = ref("") //物品图鉴搜索文本
const AlchemyPopup = ref(false) // 控制炼丹炉弹窗显示
const SelectAlchemyPopup = ref(false) // 控制选择丹药弹窗的显示
const AlchemyTimer = ref(null) // 炼丹炉倒计时
const IncidentPopup = ref(false) // 控制随机事件弹窗显示
const IncidentTitle = ref("") // 随机事件弹窗标题
const IncidentWord = ref("") // 随机事件弹窗内容
const IncidentRewards = ref("") // 随机事件弹窗奖励说明
const ShopRefreshFlag = ref(false) // 控制商店页面在刷新时及时更新页面
const ElixirFlag = ref(1)
const ElixirTitle = ref("")
const MapInformationPopup = ref(false) // 控制地图弹窗加载
const SignInPopup = ref(false) // 控制签到弹窗显示
const SurvivePopup = ref(false) // 控制求生弹窗显示
const ShopNpc = ref() //商店npc
const NpcInformation = ref()//当前需要提升好感的npc信息
const CDKEYPopup = ref(false) // 控制兑换码弹窗显示
const cdkeyId = ref("") // 兑换码名称
const CDKEYRewardsPopup = ref(false)// 控制兑换码奖励弹窗显示
const CDKEYRewardsList = ref([])// 控制兑换码奖励数据
const SeedTimer = ref({
    item1: null,
    item2: null,
    item3: null,
    item4: null,
    item5: null,
    item6: null,
    item7: null,
    item8: null,
    item9: null
})

// 丹药数据
const AlchemyList = ref([
    {
        name: "锻体丹",
        expend: [{
            name: "cai1",
            num: 1
        },
        {
            name: "cai2",
            num: 2
        }]
    },
    {
        name: "破镜丹",
        expend: [{
            name: "cai10",
            num: 3
        }]
    },
    {
        name: "凝气丹",
        expend: [{
            name: "cai1",
            num: 1
        },
        {
            name: "cai3",
            num: 2
        }]
    }, {
        name: "筑基丹",
        expend: [{
            name: "cai1",
            num: 1
        },
        {
            name: "cai4",
            num: 2
        }]
    }, {
        name: "聚神丹",
        expend: [{
            name: "cai5",
            num: 1
        },
        {
            name: "cai6",
            num: 2
        }]
    }, {
        name: "凝神丹",
        expend: [{
            name: "cai5",
            num: 1
        },
        {
            name: "cai7",
            num: 2
        }]
    }, {
        name: "化形丹",
        expend: [{
            name: "cai8",
            num: 1
        },
        {
            name: "cai9",
            num: 2
        }]
    }, {
        name: "水溶丹",
        expend: [{
            name: "cai1",
            num: 2
        },
        {
            name: "cai10",
            num: 3
        }]
    }
])
// 物品信息弹窗
const items = ref({
    itemName: "",
    itemDetails: "",
    itemEvaluate: ""
})

const Breakthrough = ref([
    {
        id: 1,
        titleSuccess: "吾辈虽凡胎肉体，然经过无数个日日夜夜的锻造，将身体达到了另外一个高度",
        wordSuccess: "渡劫成功：升级至淬体",
        titleError: "时光匆匆，虽刻苦修炼，终是无法触碰大道的门槛",
        wordError: "突破失败增加20%突破率"
    },
    {
        id: 2,
        titleSuccess: "吾辈虽凡胎肉体，然经过无数个日日夜夜的锻造，将身体达到了另外一个高度",
        wordSuccess: "渡劫成功：升级至淬体",
        titleError: "吾辈虽天资聪颖，奈何逆天改命总归上天所不容，随苦修数年，然无法突破",
        wordError: "突破失败增加18%突破率"
    },
    {
        id: 3,
        titleSuccess: "在锤炼身体成功之后，不断吸纳天地元气与己身，慢慢形成丹田",
        wordSuccess: "渡劫成功：升级至练气",
        titleError: "身体锤炼数万遍，终不及那天赋使然，即便强行收纳天地元气与己身，依然无法突破那一丝修仙之门槛",
        wordError: "突破失败增加15%突破率"
    },
    {
        id: 4,
        titleSuccess: "又经过无数个日夜的洗礼，将丹田由气壮慢慢变化为液状正式踏入修仙世界的门槛",
        wordSuccess: "渡劫成功：升级至筑基前期",
        titleError: "吸纳天地之气，修养己身，虽已达至巅峰，然丹田玄妙却一知半解，始终无法参悟其中根本",
        wordError: "突破失败增加12%突破率"
    }, {
        id: 5,
        titleSuccess: "一日深夜，梦中静坐，感官自身，发现自身灵识暴涨、寿元增加，甚至达至辟谷",
        wordSuccess: "渡劫成功：升级至筑基后期",
        titleError: "修炼时三心二意，练功时松懈怠慢，根基之不稳何以成大事",
        wordError: "突破失败增加12%突破率"
    }, {
        id: 6,
        titleSuccess: "在日夜闭关之时，偶感丹田内凝聚一白斑，斑点呈圆形，斑点偏小、光亮偏暗",
        wordSuccess: "渡劫成功：升级至聚丹前期",
        titleError: "凝聚天地之气于丹田之上，幻化千方小世界于一点之中。虽玄妙至极却终是幻想",
        wordError: "突破失败增加10%突破率"
    }, {
        id: 7,
        titleSuccess: "一道天雷而下，运气全身功力堪堪躲过，这时直觉丹田中白斑变大，光亮增强，整个丹田都被白斑照亮",
        wordSuccess: "渡劫成功：升级至聚丹后期",
        titleError: "凝聚天地之气于丹田之上，幻化千方小世界于一点之中。虽玄妙至极却终是幻想",
        wordError: "突破失败增加10%突破率"
    }, {
        id: 8,
        titleSuccess: "修仙者夺天地之造化，乃天道所不容，今日正在吃饭间，三道天劫从空中直直劈向头顶，我运气全身力量轻松抵挡。后只觉丹田传来热流。白斑化成实物球状，置于丹田内",
        wordSuccess: "渡劫成功：升级至金丹前期",
        titleError: "凝金丹于体内，金丹不灭生机尚存，每凝金丹之时，总有裂痕不能得其形",
        wordError: "突破失败增加8%突破率"
    }, {
        id: 9,
        titleSuccess: "某日，天降大雨，携伞出游，遇湖泊，见水中鱼儿玩耍驻足观看久久不能回神，不知多久鱼群消失于湖面方才有了意识，只见倾盆大雨已经结束，观此有感，丹田内金丹成长至鸡蛋大小",
        wordSuccess: "渡劫成功：升级至金丹中期",
        titleError: "凝金丹于体内，金丹不灭生机尚存，每凝金丹之时，总有裂痕不能得其形",
        wordError: "突破失败增加8%突破率"
    }, {
        id: 10,
        titleSuccess: "一日修炼顿感丹田中金丹出现裂痕，仿佛有活物要从金丹中崩裂出来",
        wordSuccess: "渡劫成功：升级至金丹后期",
        titleError: "凝金丹于体内，金丹不灭生机尚存，每凝金丹之时，总有裂痕不能得其形",
        wordError: "突破失败增加8%突破率"
    }
]) // 突破文字描述

// 荒野求生
const Survive = () => {
    // if (Main.Character.realmChildren.realmBigId < 4) {
    //     Alert({
    //         title: "您的修炼境界不够，请达到筑基期再来探索吧",
    //         time: 3000,
    //         type: "error"
    //     })
    //     return
    // }
}
// 展开求生模块
const SurviveChange = () => {

    SurvivePopup.value = true

    // router.push({ name: "GameMap" })
}
// 展开地图
const MapInformation = () => {
    MapInformationPopup.value = true

    // router.push({ name: "GameMap" })
}
//  展开兑换码弹窗
const CDKEY = () => {
    CDKEYPopup.value = true
}
const RedeemCode = async () => {
    const res = await Axios("/Game/CDKEY", "POST", { cdkeyId: cdkeyId.value });
    if (res.code == 200) {
        Main.ADDCHARACTERS()
        CDKEYRewardsPopup.value = true
        CDKEYRewardsList.value = res.data
        cdkeyId.value = ""
        Alert({
            title: res.message,
            time: 2000, // 每个组件小时时间 默认值1s
        })

    } else {
        Alert({
            title: res.message,
            time: 2000, // 每个组件小时时间 默认值1s
            //组件类型
            type: "error"
        })
    }
}

// 签到/补签
const Punch = async (item, num) => {
    let res = null

    if (num == 1) {
        res = await Axios("/Game/Punch", "POST", item);
    } else {

        res = await Axios("/Game/PunchReplenishment", "POST", item);
    }
    if (res.code == 200) {
        Main.ADDCHARACTERS()
        Main.SignInformation()
        Alert({
            title: res.message,
            time: 2000, // 每个组件小时时间 默认值1s
            //组件类型
        })
        setTimeout(async () => {
            await IncidentUse(3)
        }, 1000)
    } else {
        Alert({
            title: res.message,
            type: "error",
            time: 2000
        })
    }
}
// 点击七日签到弹窗
const signIn = () => {
    ShopNpc.value = Main.Player.npc.filter(el => el.npcId == "npc1")[0]
    Main.SignInformation()
    SignInPopup.value = true
}

// 出售商品数量编辑事件
const text = (e, item) => {
    let pattren = /^[1-9]\d{0,}/
    if (!pattren.test(e.target.innerText)) {
        item.num = 1
        e.target.innerText = 1
        console.dir(e.target);
    } else if (e.target.innerText > item.itemNum) {
        e.target.innerText = item.itemNum
        item.num = item.itemNum
    } else {
        item.num = parseInt(e.target.innerText)
    }

}

// 炼丹师突破
const AlchemyBreakthrough = async (item, index) => {
    // 判断背包中是否有足够多的炼丹要记
    let num = 0;
    let items = []
    if (index == 1) {
        items = Main.Character.itemDetails.filter(el => el.itemId == "shu1")
    } else {
        items = Main.Character.itemDetails.filter(el => el.itemId == "shu5")
    }
    parseInt(item.professionBranch[0].occupationId) * 5 > 99 ? num = 99 : num = parseInt(item.professionBranch[0].occupationId) * 5
    if (items.length <= 0 || items[0].itemNum < num) {
        Alert({
            title: `炼丹要记不足。需要${num}本炼丹要记才能突破`,
            type: "error",
            time: 2000
        })
        return
    }

    const res = await Axios("/Game/AlchemyBreakthrough", "POST", index);
    if (res.code == 200) {
        await Main.ADDCHARACTERS()
        Alert({
            title: "突破成功",
            time: 2000, // 每个组件小时时间 默认值1s
            //组件类型
        })
        setTimeout(async () => {
            await IncidentUse(3)
        }, 1000)
    } else {
        Alert({
            title: res.message,
            type: "error",
            time: 2000
        })
    }

}

// 暂停或者开始炼丹
const AlchemyStop = async (type) => {
    Main.Character.elixir.elixirStatus = type
    const res = await Axios("/Game/StopRefining", "POST", Main.Character.elixir);
    if (res.code == 200) {
        await Main.ADDCHARACTERS()
        Alchemy()
        Alert({
            title: "操作成功",
            type: "success",
            time: 2000
        })
    } else {
        Alert({
            title: "网络异常",
            type: "error",
            time: 2000
        })
    }

}

// 判断炼丹草药是否充足
const AlchemyNum = () => {
    let list = AlchemyList.value.filter(el => el.name == Main.Character.elixir.itemChildren.itemName)
    if (list.length <= 0) {
        return 1
    }
    let Flag = 1;
    // 获取背包
    list[0].expend.forEach(el => {
        let item = Main.Character.itemDetails.filter(el1 => el1.itemId == el.name);
        if (item.length <= 0 || item.itemNum < el.num) {
            Flag = 2
        }
    })
    return Flag

}
// 开启炼丹炉倒计时
const Alchemy = () => {
    ElixirTitle.value = InitTime(Main.Character.elixir.elixirTime)

    AlchemyTimer.value ? clearInterval(AlchemyTimer.value) : ""
    Main.Character.elixir.elixirStatus ? ElixirFlag.value = 1 : ElixirFlag.value = 3
    // 当没有选择种子或者停止炼丹时候清除定时器
    if (!Main.Character.elixir.itemId || !Main.Character.elixir.elixirStatus) {
        return
    }
    // 当没有草药不足的时候清除定时器  
    ElixirFlag.value = AlchemyNum()
    if (ElixirFlag.value == 2) {
        return
    }
    AlchemyTimer.value = setInterval(async () => {
        Main.Character.elixir.elixirTime -= 10000
        ElixirTitle.value = InitTime(Main.Character.elixir.elixirTime)

        if (Main.Character.elixir.elixirTime <= 0) {

            Main.Character.elixir.elixirTime = Main.Character.elixir.itemChildren.itemGrow * 1000
            ElixirTitle.value = InitTime(Main.Character.elixir.elixirTime)

            // // 调用炼丹接口
            const res = await Axios("/Game/RefiningDan", "POST", Main.Character.elixir.itemChildren);
            if (res.code == 200 || res.code == 2002) {
                await Main.ADDCHARACTERS()
                Main.Character.elixir.elixirTime = Main.Character.elixir.itemChildren.itemGrow * 1000
                ElixirTitle.value = InitTime(Main.Character.elixir.elixirTime)
                ElixirFlag.value = AlchemyNum()
                if (ElixirFlag.value == 2) {
                    AlchemyTimer.value ? clearInterval(AlchemyTimer.value) : ""
                    return
                }
            } else if (res.code == 2003) {
                AlchemyTimer.value ? clearInterval(AlchemyTimer.value) : ""
                ElixirFlag.value = 4
                await AlchemyStop(false)
            } else {
                AlchemyTimer.value ? clearInterval(AlchemyTimer.value) : ""
                Alert({
                    title: "网络异常",
                    type: "error",
                    time: 2000
                })
            }

        }
    }, 1000)
}
// 初始化倒计时时间
const InitTime = (date) => {
    let title = ""
    let h = 0
    let m = 0
    let s = 0
    h = date / (1000 * 60 * 60)
    Math.floor(h) > 0 ? m = date / (1000 * 60) - Math.floor(h) * 60 : m = date / (1000 * 60)
    Math.floor(m) > 0 ? s = date / (1000) - Math.floor(m) * 60 : s = date / (1000)
    Math.floor(h) > 0 ? title = `${Math.floor(h)}小时${Math.floor(m)}分${Math.floor(s)}秒` : Math.floor(m) > 0 ? title = `${Math.floor(m)}分${Math.floor(s)}秒` : title = `${Math.floor(s)}秒`
    return title;
}
// 选择丹药
const SelectAlchemyConfirm = async (item) => {

    const res = await Axios("/Game/SelectAlchemy", "POST", { itemName: item.name });   // 切换丹药
    if (res.code == 200) {
        await Main.ADDCHARACTERS()
        Alchemy()
        Alert({
            title: "成功",
            type: "success"
        })

        SelectAlchemyPopup.value = false
    } else {
        Alert({
            title: res.message,
            type: "error"
        })
    }
}

// 点击选择丹药文件
const SelectAlchemy = () => {
    SelectAlchemyPopup.value = true

}
// 关闭炼丹炉弹窗
const AlchemyPopupClose = () => {
    AlchemyPopup.value = false
}

// 使用物品
const Unlock1 = ref((type, title, num) => {

    let seed = JSON.parse(JSON.stringify(Main.Character.itemDetails))
    ItemUseList.value = []
    if (num == 0) {
        ItemUseList.value = seed.filter(el => el.itemType == type && (el.itemId == "shu2" || el.itemId == "shu3" || el.itemId == "shu4"))
    } else if (num == 1) {
        ItemUseList.value = seed.filter(el => el.itemType == type && (el.itemId == "shu6" || el.itemId == "shu7" || el.itemId == "shu8"))
    }

    // ItemUseList.value = seed.filter(el => el => el.itemId == "shu1")
    ItemUseError.value = title
    ItemUsePopup.value = true

})


// 点击提升好感度
const Promote = (npc, type, detail) => {

    NpcInformation.value = JSON.parse(JSON.stringify(npc))
    // npcId
    let seed = JSON.parse(JSON.stringify(Main.Character.itemDetails))
    ItemUseList.value = []
    ItemUseList.value = seed.filter(el => el.itemType == type)
    // ItemUseList.value = seed.filter(el => el => el.itemId == "shu1")
    ItemUseError.value = detail
    ItemUsePopup.value = true
}


// 炼丹师解锁
const Unlock = ref((type, title, num) => {
    if (num == 0) {
        // 判断背包中是否存在炼丹要记
        let item = Main.Character.itemDetails.filter(el => el.itemId == "shu1")
        if (item.length <= 0) {
            Alert({
                title: "您没有炼丹要记无法学习炼丹之术",
                type: "error",
                time: 3000,
            })
            return
        }
        let seed = JSON.parse(JSON.stringify(Main.Character.itemDetails))
        ItemUseList.value = []
        // ItemUseList.value = seed.filter(el => el.itemType == type)
        ItemUseList.value = seed.filter(el => el.itemId == "shu1")
    } else if (num == 1) {
        // 判断背包中是否存在炼丹要记
        let item = Main.Character.itemDetails.filter(el => el.itemId == "shu1")
        if (item.length <= 0) {
            Alert({
                title: "您没有求生笔记无法练习求生之术",
                type: "error",
                time: 3000,
            })
            return
        }
        let seed = JSON.parse(JSON.stringify(Main.Character.itemDetails))
        ItemUseList.value = []
        // ItemUseList.value = seed.filter(el => el.itemType == type)
        ItemUseList.value = seed.filter(el => el.itemId == "shu5")
    }


    ItemUseError.value = title
    ItemUsePopup.value = true

})
// 点击炼丹炉
const Censer = () => {
    let alchemy = Main.Character.profession.filter(el => el.professionId == 1)[0]
    if (alchemy.professionStatus != 1) {
        Alert({
            title: "您没有炼丹天赋，无法炼丹,请学习炼丹要记之后在进行炼制丹药",
            type: "error",
            time: 3000,
        })
        return
    }
    AlchemyPopup.value = true

}

// 物品图鉴搜索
const ItemCodexSelect = () => {
    setTimeout(() => {
        if (ItemCodexSelectTitle.value == "") {
            MainItemList.value = Main.item
        } else {
            MainItemList.value = Main.item.filter(el => el.itemName.indexOf(ItemCodexSelectTitle.value) != -1)
        }
    }, 1200)

}
// 关闭物品出售弹窗
const SellShopPopupClose = () => {
    SellShopPopup.value = false
}
//确认出售
const ConfirmSell = async () => {
    if (SellShopPrepareList.value.length <= 0) {
        Alert({
            title: "没有待出售的物品",
            type: "error"
        })
        return
    }
    const res = await Axios("/Game/SellShop", "POST", SellShopPrepareList.value); // 出售商品
    if (res.code == 200) {
        Alert({
            title: "出售成功",
            type: "success"
        })
        Main.ADDCHARACTERS()
        SellShopPrepareList.value = []
        SellShopPopup.value = false
    } else {
        Alert({
            title: "出售失败",
            type: "error"
        })
    }

}
// 取消出售商品按钮
const SellShopCancelButton = (item) => {
    let obj = JSON.parse(JSON.stringify(item))
    obj.itemNum = item.num
    obj.num = 1
    // 当待出售商品为空的时候
    if (SellShopList.value.length <= 0) {
        SellShopList.value.push(obj)
    } else {
        // 不为空的时候
        // 判断当前商品是不存在在待出售商品中
        let list = SellShopList.value.filter(el => el.itemId == obj.itemId)
        if (list.length > 0) {
            // 标识待出售商品中存在新加入商品
            list[0].itemNum += obj.itemNum
        } else {
            SellShopList.value.push(obj)
        }
    }
    // 判断需要出售的商品数量是否为空
    SellShopPrepareList.value.forEach((el, index) => {
        if (el.itemId == item.itemId && item.itemNum - item.num <= 0) {
            SellShopPrepareList.value.splice(index, 1)
        } else if (el.itemId == item.itemId && item.itemNum - item.num > 0) {
            el.itemNum -= item.num
            item.num = 1
        }
    })

    if (SellShopPrepareList.value <= 0) {
        SellTotalNum.value = 0
        SellTotalMoney.value = 0
    } else {
        let num = 0
        let Money = 0
        SellShopPrepareList.value.forEach(el => {
            num += el.itemNum
            Money += el.itemNum * el.itemMoney
        })
        SellTotalNum.value = num
        SellTotalMoney.value = Money
    }
}
// 点击出售页面出售按钮
const SellShopButton = (item) => {
    let obj = JSON.parse(JSON.stringify(item))
    obj.itemNum = item.num
    obj.num = 1
    // 当待出售商品为空的时候
    if (SellShopPrepareList.value.length <= 0) {
        SellShopPrepareList.value.push(obj)
    } else {
        // 不为空的时候
        // 判断当前商品是不存在在待出售商品中
        let list = SellShopPrepareList.value.filter(el => el.itemId == obj.itemId)
        if (list.length > 0) {
            // 标识待出售商品中存在新加入商品
            list[0].itemNum += obj.itemNum
        } else {
            SellShopPrepareList.value.push(obj)
        }
    }
    // 判断需要出售的商品数量是否为空
    SellShopList.value.forEach((el, index) => {
        if (el.itemId == item.itemId && item.itemNum - item.num <= 0) {
            SellShopList.value.splice(index, 1)
        } else if (el.itemId == item.itemId && item.itemNum - item.num > 0) {
            el.itemNum -= item.num
            item.num = 1
        }
    })

    if (SellShopPrepareList.value <= 0) {
        SellTotalNum.value = 0
        SellTotalMoney.value = 0
    } else {
        SellShopPrepareList.value.forEach(el => {
            SellTotalNum.value += el.itemNum
            SellTotalMoney.value += el.itemNum * el.itemMoney
        })
    }

}
// 点击出售弹窗减号
const SellShopDecrease = (item) => {
    if (item.num <= 1) {
        return
    }
    item.num--
}
// 点击出售弹窗加号
const SellShopAdd = (item) => {
    if (item.itemNum <= item.num) {
        return
    }
    item.num++
}
// 出售
const SellShop = () => {
    if (Main.Character.itemDetails.length <= 0) {
        Alert({
            title: "您的背包中不存在商品，无法出售",
            type: "error",
            time: 2000,
        })
        return
    }
    // 打开出售弹窗
    const items = Main.Character.itemDetails.filter(el => el.itemSearch == 1)
    // SellShopList.value = JSON.parse(JSON.stringify(Main.Character.itemDetails))
    SellShopList.value = JSON.parse(JSON.stringify(items))
    if (SellShopList.value.length > 0) {
        SellShopList.value.forEach(el => {
            el.num = 1
        })
    }

    SellShopPrepareList.value = []
    SellTotalMoney.value = 0
    SellTotalNum.value = 0
    SellShopPopup.value = true
}
// 停止种植
const StopSeed = (index) => {
    Main.croplands[index].flag = !Main.croplands[index].flag
    Axios("/Game/CroplandSave", "POST", Main.croplands); // 保存当前农田信息
    if (!Main.croplands[index].flag) {
        SeedTimer.value[`item${index + 1}`] != null ? clearInterval(SeedTimer.value[`item${index + 1}`]) : ""
        Alert({
            title: "操作成功",
            type: "success"
        })
    } else {
        Seed()
    }
}
// 农田种子收获倒计时功能
const Seed = () => {
    // 获得农田数据
    // 给农田数据初始化倒计时功能
    Main.croplands.forEach((el, index) => {
        // SeedTimer.value[`item${index + 1}`] != null ? clearInterval(SeedTimer.value[`item${index + 1}`]) : ""
        if (el.itemId != null) {
            el.name = el.itemChildren.itemName
            SeedTimer.value[`item${index + 1}`] != null ? clearInterval(SeedTimer.value[`item${index + 1}`]) : ""
            el.timeTitle = ""
            let h = 0
            let m = 0
            let s = 0
            h = el.time / (1000 * 60 * 60)
            Math.floor(h) > 0 ? m = el.time / (1000 * 60) - Math.floor(h) * 60 : m = el.time / (1000 * 60)
            Math.floor(m) > 0 ? s = el.time / (1000) - Math.floor(m) * 60 : s = el.time / (1000)
            Math.floor(h) > 0 ? el.timeTitle = `${Math.floor(h)}小时${Math.floor(m)}分${Math.floor(s)}秒` : Math.floor(m) > 0 ? el.timeTitle = `${Math.floor(m)}分${Math.floor(s)}秒` : el.timeTitle = `${Math.floor(s)}秒`
            if (el.flag) {
                SeedTimer.value[`item${index + 1}`] = setInterval(async () => {
                    if (el.time <= 0) {
                        el.time = el.itemChildren.itemGrow * 1000
                        // 当农田收获的时候，获得对应的物品
                        const res1 = await Axios("/Game/harvest", "POST", el);
                        if (res1.code == 2003) {
                            SeedTimer.value[`item${index + 1}`] != null ? clearInterval(SeedTimer.value[`item${index + 1}`]) : ""
                        } else if (res1.code == 200) {
                            Main.ADDCHARACTERS()
                        }
                    }
                    let h = 0
                    let m = 0
                    let s = 0
                    h = el.time / (1000 * 60 * 60)
                    Math.floor(h) > 0 ? m = el.time / (1000 * 60) - Math.floor(h) * 60 : m = el.time / (1000 * 60)
                    Math.floor(m) > 0 ? s = el.time / (1000) - Math.floor(m) * 60 : s = el.time / (1000)
                    Math.floor(h) > 0 ? el.timeTitle = `${Math.floor(h)}小时${Math.floor(m)}分${Math.floor(s)}秒` : Math.floor(m) > 0 ? el.timeTitle = `${Math.floor(m)}分${Math.floor(s)}秒` : el.timeTitle = `${Math.floor(s)}秒`
                    el.time -= 1000
                }, 1000)
            }

        }
    })
}

// 使用特定物品弹窗种子
const UseSeed = async (item) => {
    if (ItemUseFlag.value) {
        ItemUseFlag.value = false
        if (item.itemType == "种子") {
            UseCropland.value.itemId = item.itemId
            await Axios("/Game/CroplandSave", "POST", Main.croplands); // 保存当前信息
            const res1 = await Axios("/Game/UseItem", "POST", item); // 物品使用接口
            const res2 = await Axios("/Game/CroplandSeed", "POST", UseCropland.value); // 种植接口
            if (res1.code == 200 && res2.code == 200) {
                await Main.CroplandId()
                Seed()
                await Main.ADDCHARACTERS()
                ItemUsePopup.value = false
            } else {
                Alert({
                    title: "种植失败",
                    time: 2000, // 每个组件小时时间 默认值1s
                    type: "error"  //组件类型
                })

            }
        } else if (item.itemType == "书籍") {
            const res = await Axios("/Game/UseItem", "POST", item); // 保存当前信息
            if (res.code == 200) {
                Alert({
                    title: "使用成功",
                    time: 2000, // 每个组件小时时间 默认值1s
                    //组件类型
                })
                Main.ADDCHARACTERS()
                ItemUsePopup.value = false
            } else {
                Alert({
                    title: res.message,
                    time: 2000, // 每个组件小时时间 默认值1s
                    type: "error"  //组件类型
                })
            }
        } else if (item.itemType == "道具") {
            NpcInformation.value.icon = item.itemId
            const res = await Axios("/Game/PropertyUse", "POST", NpcInformation.value); // 保存当前信息
            if (res.code == 200) {
                Alert({
                    title: "使用成功",
                    time: 2000, // 每个组件小时时间 默认值1s
                    //组件类型
                })
                await Main.PlayerUid()
                ShopNpc.value = Main.Player.npc.filter(el => el.npcId == "npc1")[0]
                Main.ADDCHARACTERS()

                if (NpcInformation.value.npcId == "npc1") {
                    Main.SignInformation()

                }
                ItemUsePopup.value = false
            } else {
                Alert({
                    title: res.message,
                    time: 2000, // 每个组件小时时间 默认值1s
                    type: "error"  //组件类型
                })
            }
        }

        ItemUseFlag.value = true

    }
}
// 选择种子
const SelectSeed = (type, title, item) => {
    UseCropland.value = {}
    UseCropland.value = item
    let seed = JSON.parse(JSON.stringify(Main.Character.itemDetails))
    ItemUseList.value = []
    ItemUseList.value = seed.filter(el => el.itemType == type)
    ItemUseError.value = title
    ItemUsePopup.value = true
}
// 购买农田
const BuyCropland = async (item) => {
    let Buy = JSON.parse(JSON.stringify(item))
    if (Main.Character.money < Buy.price) {
        Alert({
            title: "灵石不足，无法购买农田",
            type: "error"
        })
        return
    }
    await Axios("/Game/CroplandSave", "POST", Main.croplands); // 保存当前信息
    Seed()
    const res = await Axios("/Game/CroplandBuy", "POST", Buy);
    if (res.code == 200) {

        Alert({
            title: "购买成功",
            type: "error"
        })
        await Main.CroplandId()
        await Main.ADDCHARACTERS()
        Seed()
    } else {
        Alert({
            title: res.message,
            type: "error"
        })
    }


}
// 头部搜索
const itemDetailsnavigation = () => {
    setTimeout(() => {
        BackpackDetailsItem()
    }, 1200)
}
// 使用商品
const UseShop = async (item) => {
    if (item.itemType == "种子") {
        Alert({
            title: "请前往农田处使用种子",
            time: 2000, // 每个组件小时时间 默认值1s
            type: "error"  //组件类型
        })
        return
    }
    if (item.itemType == "草药") {
        Alert({
            title: "草药用于炼丹，炼丹时自动使用",
            time: 2000, // 每个组件小时时间 默认值1s
            type: "error"  //组件类型
        })
        return
    }
    if (item.itemType == "道具") {
        Alert({
            title: "需要在对应情况下才能使用",
            time: 2000, // 每个组件小时时间 默认值1s
            type: "error"  //组件类型
        })
        return
    }
    if (item.itemType == "工具") {
        Alert({
            title: "在对应场景下会自动使用",
            time: 2000, // 每个组件小时时间 默认值1s
            type: "error"  //组件类型
        })
        return
    }
    if (item.itemType == "消耗" && item.itemId != "xiao5" && item.itemId != "xiao6") {
        Alert({
            title: "在对应场景下会自动使用",
            time: 2000, // 每个组件小时时间 默认值1s
            type: "error"  //组件类型
        })
        return
    }
    const res = await Axios("/Game/UseItem", "POST", item); // 保存当前信息
    if (res.code == 200) {
        Alert({
            title: "使用成功",
            time: 2000, // 每个组件小时时间 默认值1s
            type: "success"  //组件类型
        })
        ItemUsePopup.value = false
        await Main.ADDCHARACTERS()
        BackpackDetailsItem()
    } else {
        Alert({
            title: res.message,
            time: 2000, // 每个组件小时时间 默认值1s
            type: "error"  //组件类型
        })

    }

}
// 点击购买商品
const ShopBuy = async () => {
    let Buy = JSON.parse(JSON.stringify(ShopItem.value))
    Buy.itemNum = Buy.price
    if (Main.Character.money < Buy.itemNum * Buy.itemMoney) {
        Alert({
            title: "灵石不足，无法购买商品",
            type: "error"
        })
        return
    }
    const res = await Axios("/Game/ShopBuy", "POST", Buy);
    if (res.code == 200) {

        Alert({
            title: "购买成功",
            type: "error"
        })
        Main.ShopRefresh()
        Main.ADDCHARACTERS()
        ShopPurchase.value = false
        ShopItem.value = {}
    } else {
        Alert({
            title: res.message,
            type: "error"
        })
    }

}
// 物品增加按钮
const ItemAdd = () => {
    if (ShopItem.value.price >= ShopItem.value.itemNum) {
        ShopItem.value.price = ShopItem.value.itemNum
        return
    }
    ShopItem.value.price++
}
// 点击减少物品按钮
const ItemReduce = () => {
    if (ShopItem.value.price == 1) {
        return
    }
    ShopItem.value.price--
}
// 关闭商店弹窗
const CloseShop = () => {
    ShopPopup.value = false
}
// 购买商品
const Purchase = () => {
    ShopPurchase.value = true
}
// 点击商店商品按钮
const SelectShopItem = (item) => {
    ShopItem.value = JSON.parse(JSON.stringify(item))
    ShopItem.value.price = 1
}

// 点击商店按钮
const SHop = () => {
    Main.ShopRefresh()
    ShopPopup.value = true
    ShopItem.value = {}
}
// 点击农田按钮
const Cropland = () => {
    CroplandPopup.value = true

}
// 退出游戏确认按钮
const QuitGameConfirm = () => {
    ClearToken()
    router.push({
        name: "home"
    })
}
// 点击职业名称打开职业详情弹窗
const ProfessionPopup = (item) => {
    // professionBranch
    ProfessionPopuphidden.value = true
    ProfessionPopupTitle.value = item.professionName
    ProfessionPopupDetails.value = JSON.parse(JSON.stringify(item.professionBranch))
}
// 点击查询个人职业
const OccupationSee = () => {
    OccupationPopup.value = true
}
// 控制全屏模式的缩放和开启
const Quit1 = () => {
    Main.Screen == 1 ? Main.Screen = 2 : Main.Screen = 1
}
// 点击退出账户
const Quit = () => {
    QuitGame.value = true
}
//关闭游戏说明弹窗
const KongzhiColse = () => {
    PopupHidden.value = false
    BackpackItemPopupHidden.value = false
    BackpackDetailsIndex.value = null
}
//打开游戏说明弹窗
const GameInstructionsPopup = () => {
    PopupHidden.value = true
}
// 切换游戏说明不同内容显示
const GameInstructions = (num) => {
    GameInstructionsHidden.value = num
    BackpackItemPopupHidden.value = false
    BackpackDetailsIndex.value = null
}
const ReakthroughWord = ref("")
// 关闭自定义弹窗
const CloseCustomBackpack = () => {
    CustomBackpackHidden.value = false
}
// 开启自定义背包弹窗
const OpenBackpack = () => {
    CustomBackpackHidden.value = true
    BackpackItemPopupHidden.value = false
    BackpackDetailsIndex.value = null
    itemDetailsType.value = "全部"
    itemDetailsTitle.value = ""
    BackpackDetailsItem()
}

// 物品弹窗xianshi
const BackpackItemPopupClick = () => {
    BackpackItemPopupHidden.value = false
}
// 点击背包物品查询背包物品详情
const BackpackDetails = (item, index) => {
    BackpackDetailsIndex.value = index
    items.value.itemName = item.itemName
    items.value.itemDetails = item.itemDetails
    items.value.itemEvaluate = item.itemEvaluate
    items.value.itemSell = item.itemSell
    SHopTimeTimer.value = setTimeout(() => {
        const dom = document.querySelectorAll(".BackpackItemBox")
        const domBox = document.querySelector(".CustomBackpackBoxHeaderContentBoxConenten")
        BackpackItemPopupWidht.value = `${dom[index].clientWidth}px`
        if (domBox.clientWidth / 2 > dom[index].offsetLeft) {
            BackpackItemPopupLeft.value = `${(dom[index].offsetLeft + dom[index].clientWidth) + 4}px`
        } else {
            BackpackItemPopupLeft.value = `${dom[index].offsetLeft - dom[index].clientWidth - 2}px`
        }
        BackpackItemPopupTop.value = `${dom[index].offsetTop}px`
        BackpackItemPopupHidden.value = true
    }, 0)
}
// 点击名称查看人物详情
const Backpack = () => {
    BackpackPopup.value = true
}
// 设置背景音乐
const SetttingMusic = () => {
    let str = GetMusic()

    let arr = str.split("-")
    arr[0] == "play" ? arr[0] = "close" : arr[0] = "play"
    str = ""

    arr.forEach((el, index) => {
        str += arr.length - 1 == index ? el : el + "-"
    })

    SetMusic(str)
    Main.MP3 = !Main.MP3
}
// 使用额外经验突破
const ExtraExperience = async () => {
    if (Main.Character.eXP == Main.Character.realmChildren.eXP) {
        Alert({
            title: "经验到达上线，无法使用经验池经验",   // 渲染的内容，
            type: "error"  //组件类型
        })
        return
    }
    const res = await Axios("/Game/ExtraExperience", "POST");
    if (res.code == 200) {
        // 开启经验加持定时器
        await Main.ADDCHARACTERS()
        const req = await Main.AddExP(1)
        req ? '' : Main.timerExpFn()

    } else {
        Alert({
            title: "网络异常，无法使用经验池经验",   // 渲染的内容，
            type: "error"  //组件类型
        })
    }
}
// 点击突破按钮
const ClickBreakthrough = async () => {
    const res = await Main.Breakthrough()
    if (res.code == 200 || res.code == 2002) {
        // 当升级成功更新数据
        await Main.ADDCHARACTERS()
        const details = Breakthrough.value.filter(el => { return el.id == Main.Character.realmChildren.realmId })[0]
        BreakthroughLv.value = true
        let index = 1
        let Title = ""
        res.code == 200 ? Title = details.titleSuccess : Title = details.titleError
        wordTitle.value = Title.charAt(0)
        ReakthroughWord.value = ""
        timerReakthrough.value = setInterval(() => {
            nextTick(async () => {
                wordTitle.value += Title.charAt(index)
                index++
                if (Title.length == index) {
                    clearInterval(timerReakthrough.value)
                    Main.timerExpFn()
                    setTimeout(async () => {
                        res.code == 200 ? ReakthroughWord.value = details.wordSuccess : ReakthroughWord.value = details.wordError
                    }, 1000)
                    setTimeout(async () => {
                        BreakthroughLv.value = false
                        setTimeout(async () => {
                            await IncidentUse(2)
                        }, 800)
                    }, 3000)
                }
            })
        }, 200)
        // 显示弹窗
    } else {
        Alert({
            title: res.message,   // 渲染的内容，
            type: "error"  //组件类型
        })
    }

}
// 随机事件弹窗使用说明
const IncidentUse = async (type) => {
    const res = await Axios("/Game/IncidentUse", "POST", type);
    if (res.code == 200) {
        IncidentWord.value = res.data.incidentWord
        IncidentRewards.value = res.data.incidentRewards
        IncidentTitle.value = res.data.incidentTitle
        IncidentPopup.value = true

        Main.ADDCHARACTERS()
    }
}
// 商店倒计时功能
const ShopTimer = () => {
    SHopTimeTimer.value ? clearInterval(SHopTimeTimer.value) : ""
    SHopTimeTimer.value = setInterval(async () => {
        let date = new Date().getTime() % (1000 * 60 * 10);
        let timers = (1000 * 60 * 10) - date
        if (timers < 1000) {
            setTimeout(async () => {
                await Main.ShopRefresh()
                ShopRefreshFlag.value = !ShopRefreshFlag.value
                await IncidentUse(1)
                Main.timerExpFn()
            }, 800)



        } else {
            let h = 0
            let m = 0
            let s = 0
            h = timers / (1000 * 60 * 60)
            Math.floor(h) > 0 ? m = timers / (1000 * 60) - Math.floor(h) * 60 : m = timers / (1000 * 60)
            Math.floor(m) > 0 ? s = timers / (1000) - Math.floor(m) * 60 : s = timers / (1000)
            Math.floor(h) > 0 ? SHopTimeTilte.value = `${Math.floor(h)}小时${Math.floor(m)}分${Math.floor(s)}秒` : Math.floor(m) > 0 ? SHopTimeTilte.value = `${Math.floor(m)}分${Math.floor(s)}秒` : SHopTimeTilte.value = `${Math.floor(s)}秒`
        }
    }, 1000)
}

// 监视windows宽度变化
window.addEventListener("resize", (e) => {
    InitResize(e.target.innerWidth)
})
// 初始化经验池
const InitResize = (size) => {
    let i = size / 10 * 3
    //
    let idx = i / 100  // 控制经验池边框
    let idxx = i / 2  // 控制经验池小圈的宽高
    let idxxxx = idxx / 3  //
    let idxxx = idxx - idx // 控制经验池距离边界的距离
    //
    TotalwidthHeart.value = `${i}px`
    widthborder.value = `${idx}px`
    widthHeart.value = `${idxx}px`
    widthHeart1.value = `${idxxx}px`
    widthHeart2.value = `${idxxxx}px`
    let width = i / Main.Character.realmChildren.expPool * Main.Character.experienceLine
    width <= 0 ? Heightwindow.value = `-100px` : Heightwindow.value = `${i / Main.Character.realmChildren.expPool * Main.Character.experienceLine}px`
}
// 页面销毁清空倒计时
onBeforeUnmount(() => {
    Main.ExpTimer ? clearInterval(Main.ExpTimer) : ""
    SHopTimeTimer.value ? clearInterval(SHopTimeTimer.value) : ""
    AlchemyTimer.value ? clearInterval(AlchemyTimer.value) : ""
    SeedTimer.value ? clearInterval(Main.ExpTimer) : ""
    for (let index = 1; index < 10; index++) {
        SeedTimer.value[`item${index}`] ? clearInterval(SeedTimer.value[`item${index}`]) : ""

    }

})
// 点击切换查询背包物品信息
const ItemTypeSelect = (str) => {
    if (itemDetailsType.value != str) {
        itemDetailsType.value = str
        BackpackItemPopupHidden.value = false
        BackpackDetailsIndex.value = null
        BackpackDetailsItem()
    }

}
// 初始化/ 搜索/ 切换背包数据 
const BackpackDetailsItem = () => {
    let item = JSON.parse(JSON.stringify(Main.Character.itemDetails))
    if (itemDetailsType.value == "全部") {
        itemDetailsTitle.value ? itemDetails.value = item.filter(el => el.itemName.indexOf(itemDetailsTitle.value) != -1) : itemDetails.value = Main.Character.itemDetails
    } else {
        itemDetailsTitle.value ? itemDetails.value = item.filter(el => el.itemName.indexOf(itemDetailsTitle.value) != -1 && el.itemType == itemDetailsType.value) : itemDetails.value = Main.Character.itemDetails.filter(el => el.itemType == itemDetailsType.value)
    }

}
// 当经验池数据上涨自动调动水波显示
watch(() => Main.Character.experienceLine, () => {
    InitResize(window.innerWidth)
})
onMounted(async () => {
    // let canvas = document.querySelector("#canvasId")
    // canvas.width = 500
    // canvas.height = 500
    // let cas = canvas.getContext("2d");
    // cas.beginPath()
    // cas.arc(250, 250, 249, 0, 360 * Math.PI / 180)
    // cas.closePath()
    // cas.stroke()
    // for (let index = 0; index < 8; index++) {
    //     let num = 360 / 8 * index
    //     cas.beginPath()
    //     cas.moveTo(250 + Math.sin(num * (Math.PI / 180)) * 250, 250 + Math.cos(num * (Math.PI / 180)) * 250)
    //     cas.lineTo(255, 250)
    //     cas.stroke()
    // }



    Loging.value = true
    ShopTimer()
    // 初始化游戏数据
    const res = await Main.ContinueGame()
    if (res) {
        Loging.value = false
        PopupHidden.value = true
        Main.MP3 = !Main.MP3
        Alert({
            time: 1000, // 每个组件小时时间 默认值1s
            title: "数据加载完成",   // 渲染的内容，
            type: "success"  //组件类型
        })
        // 开启经验加持定时器
        Main.timerExpFn()
        InitResize(window.innerWidth)
        // 获取用户数据
        BackpackDetailsItem()
        // 初始化农田种植信息
        Seed()
        // 初始化图鉴信息
        MainItemList.value = Main.item
        // 开启炼丹炉
        Alchemy()

    } else {
        Loging.value = false
        router.push({ name: "home" })

        Alert({
            time: 3000, // 每个组件小时时间 默认值1s
            title: "数据加载失败",   // 渲染的内容，
            type: "error"  //组件类型
        })
    }


})
</script>

<style lang="scss" scoped>
@use "sass:math";

.turntable_big {
    /*--TotalwidthHeart: v-bind(TotalwidthHeart);*/
    --TotalwidthHeart: v-bind(TotalwidthHeart);
    width: var(--TotalwidthHeart);
    height: var(--TotalwidthHeart);
    background: #000;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;

    .turntable_small {

        position: relative;
        background: #1139cb;
        padding: 0;
        width: calc(var(--TotalwidthHeart) - 30px);
        height: calc(var(--TotalwidthHeart) - 30px);
        border-radius: 50%;
        list-style: none;

        .sector {
            position: absolute;
            width: calc(var(--TotalwidthHeart) - 30px);
            height: calc(var(--TotalwidthHeart) - 30px);
            border-radius: 0px calc(var(--TotalwidthHeart) - 30px) calc(var(--TotalwidthHeart) - 30px) 0;
            transform: rotate(-18deg);
            overflow: hidden;
        }

        .sector-inner {
            text-align: center;
            display: block;
            width: 40%;
            height: 100%;
            background: #ffeab1;
            transform: translateX(calc(var(--TotalwidthHeart) - 30px)) rotate(36deg);
            transform-origin: right center;
            border-radius: 100px 0 0 100px;
        }

        .sector-inner span {
            display: block;
            transform-origin: center;
            transform: rotate(-19deg);
            color: #d46854;
        }


        /*$num: 5;
       /* @for $n from 1 through $num {*/
        /*  & :nth-child() {*/
        /*      transform: rotate($n * (360deg / $num)) skewY(360deg - 18);*/
        /*   }*/
        /*  }*/



        .turntable_content {
            width: calc(var(--TotalwidthHeart) / 5);
            height: calc(var(--TotalwidthHeart) / 5);
            border-radius: 50%;
            position: absolute;
            background: red;
            display: flex;
            justify-content: center;
            align-items: center;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            cursor: pointer;
        }


    }
}

.CDKEYRewardsStyle {
    text-align: cneter;
}

.CDKEYStyle {
    text-align: center;
}

.SignInPopupBox {
    width: 100%;

    .SignInPopupBoxTotal {
        width: 100%;

        .SignInPopupInformation {
            width: 100%;
            display: grid;
            grid-template-columns: repeat(3, 32%);
            gap: 10px;



            .SignInPopupInformationBox {
                border: 1px solid #000;
                text-align: center;

                button {
                    margin: 0;
                    background: #5106ff;
                }
            }

            .SignInPopupInformationRen {
                display: flex;
                align-items: center;

                .SignInPopupInformationRenName {
                    flex: 1;
                    margin: 0 4px;
                }

                .SignInPopupInformationRenXn {
                    flex: 1;
                    margin-right: 4px;

                    button {
                        margin: 0;
                        padding: 0;
                    }
                }

                .SignInPopupInformationRenD {
                    flex: 3;
                }
            }

            &>:last-of-type {
                color: red;
                background: #000;
                grid-column-start: 2;
                grid-column-end: 4;
            }

            /*   & :last-child {
                color: red;
                background: #000;
                grid-column-start: 3;
                grid-column-end: 6;
            }*/
        }


    }
}

.MapInformationPopup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 1);
    z-index: 100;
    padding: 10px;
    box-sizing: border-box;
}

.croplandPopup {
    width: 100%;
    height: 80vh;
    margin: auto 0;
    box-sizing: border-box;
    overflow: hidden;

    .croplandPopupTotal {
        height: 100%;
        width: 100%;
        box-sizing: border-box;
        overflow: hidden;

    }

    .croplandPopupBox {
        height: 100%;
        width: 100%;
        overflow-y: auto;
        display: grid;
    }
}

.SelectAlchemyPopup {
    height: 80vh;
    overflow: hidden;

    .SelectAlchemyPopupBox {
        height: 100%;
        overflow-y: auto;
    }
}

.alchemy {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;

    img {
        position: absolute;
        width: 100%;
        height: 100%;
        opacity: 1;
    }

    .alchemyBox {
        position: absolute;
        width: 80%;
        height: 80%;
        color: #fff;
        background: rgba(0, 0, 0, 0.3);
        user-select: none;

        header {
            text-align: center;
        }

        .SelectAlchemy {
            text-align: center;
            cursor: pointer;
        }

    }
}

.Color2 {
    color: #00FFFF !important;
}

.Color3 {
    color: #FAC000 !important;
}

.SellShopPopup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;

    .SellShopPopupBox {
        height: 80%;
        width: 80%;


        .SellShopPopupMain {
            width: 100%;
            height: 100%;
            display: flex;
            color: #000;

            .SellShopPopupModel1 {
                flex: 2;
                background: #fff;
                padding: 8px;
                height: 100%;
                box-sizing: border-box;
                overflow: hidden;

                .SellShopPopupModel1Box {
                    height: 100%;
                    overflow: auto;

                    .SellShop {
                        border: 1px solid #aaa;
                        padding: 6px;
                        box-sizing: border-box;

                        p {
                            margin-top: 0;
                            margin-bottom: 6px;
                            user-select: none;

                            button {
                                background: #888;
                                margin: 0;
                            }

                            .SellShopNum {
                                display: inline-block;
                                width: 40%;
                                border: 1px solid #888;
                                border-radius: 10px;
                                margin-right: 4px;

                                span {
                                    display: inline-block;
                                    text-align: center;
                                    width: 32%
                                }

                                & :first-child {
                                    cursor: pointer;
                                    height: 100%;
                                }

                                & :nth-child(2) {
                                    height: 100%;
                                    border-right: 1px solid #888;
                                    border-left: 1px solid #888;
                                }

                                & :last-child {
                                    cursor: pointer;
                                }
                            }
                        }
                    }
                }

            }

            .SellShopPopupModel2 {
                flex: 1;
                color: #fff;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 36px;
            }
        }
    }
}

.ItemUsePopupBox {
    width: 100%;
    height: 100%;
    overflow: hidden;

    .ItemUsePopup {
        height: 100%;
        overflow-y: auto;

        .ItemUsePopupChildren {
            border: 1px solid #aaa;

        }

        .Name {
            position: relative;
            box-sizing: border-box;
        }

        .Use {
            text-align: center;
            cursor: pointer;
            color: #5106ff;

        }

    }
}




.cropland {
    text-align: center;
    border: 1px solid #aaa;
    display: grid;
    align-items: center;

    .croplandMain {
        margin-bottom: 4px;
    }

    button {
        background: #aaa;
        margin-top: 0;
    }
}


.DIYShop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 100;
    padding: 10px;
    box-sizing: border-box;

    .ShopItemDateils {
        width: 100%;
        margin: 0 auto;
        display: flex;

        .ShopItemDateilsLeft,
        .ShopItemDateilsRight {
            flex: 1;
        }

        .ShopItemDateilsLeft {
            text-align: center;

            .ShopItemDateilsName {
                background: #888;
                color: #fff;
            }

            .ShopItemDateilsDetails {
                height: 100px;
                width: 100%;
                text-align: left;

                .ShopItemDateilsDetailsChildren {
                    height: 100%;
                    overflow-y: scroll;
                }

            }
        }

        .ShopItemDateilsRight {
            padding-left: 12px;
            user-select: none;

            p {
                margin-top: 0;
                margin-bottom: 4px;
            }

            .ShopItemDateilsBut {
                width: 90%;

                background: #000;
                color: #fff;

                span {
                    text-align: center;
                    display: inline-block;
                    width: 29%;
                    cursor: pointer;
                }

                .ShopItemDateilsButNum {
                    border-left: 1px solid #fff;
                    border-right: 1px solid #fff;
                    box-sizing: border-box;
                }
            }
        }
    }

    .ShopBox {
        position: relative;

        width: 70%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: #000;
        display: flex;

        .ShopBoxContent {
            width: 100%;
            height: 80%;
            background: #fff;
            padding: 8px;

            .ShopBoxContentHeader {
                display: flex;
                justify-content: space-between;
                border-bottom: 1px dashed #888;

                .Sell {
                    cursor: pointer;
                    color: rgb(0, 13, 255);
                }
            }

            .ShopBoxMain {


                .ShopItem {
                    cursor: pointer;
                    text-align: center;

                    .ShopItemName {
                        border: 1px solid #000;
                        padding: 10px;
                        position: relative;

                        .ShopItemNum {
                            position: absolute;
                            right: 2px;
                            bottom: 0;

                        }
                    }

                    .ShopItemPrice {
                        background: #888;
                        width: 80%;
                        margin: 0 auto;
                        color: #fff;
                        border-radius: 6px;
                    }
                }

                .ShopItemColor {
                    border: 2px solid red;

                }
            }

        }
    }
}



.CroplandPopupBox {
    text-align: center;
    border: 1px solid red;
}

.Header {
    text-align: center;
    cursor: pointer;
    user-select: none;

    sup {
        display: inline-block;
        font-size: 1px;
        border-radius: 50%;
        border: 1px solid #fff;
        width: 15px;
        height: 15px;
        line-height: 15px;
        text-align: center;

    }

    .GameInstructions {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.8);
        z-index: 100;
        box-sizing: border-box;
        border: 1px solid #fff;

        .span {
            position: absolute;
            right: 10px;
            color: red;
        }

        .GameInstructionsBox {
            position: absolute;
            display: flex;
            color: #fff;
            width: 100%;
            height: 80%;
            border: none;
            background: none;
            top: 50%;
            transform: translateY(-50%);

            .GameInstructionsLeft {
                flex: 2;
                margin-right: 10px;
                text-align: left;

                .GameInstructionsLeftBox {
                    margin: 6px;
                    padding: 6px;
                    box-sizing: border-box;
                    border-radius: 6px;
                }

                .GameInstructionsLeftBoxStyle {
                    border: 1px solid red;
                    color: red;
                }
            }

            .GameInstructionsRight {
                flex: 8;
                text-align: left;
                background: #fff;
                color: #000;
                margin-right: 6px;
                height: 100%;

                .Mode1 {
                    height: 100%;

                    .Mode1Box {
                        height: 100%;
                        overflow-y: auto;
                    }

                    ul {
                        margin: 0;

                    }
                }

                .Profession {
                    color: #000;
                    padding: 10px;

                    .ProfessionBox {
                        border-bottom: 1px dashed #888;

                        .ProfessionBoxTitle {
                            color: aqua;
                        }
                    }
                }

                button {
                    background: #aaa;
                }

                .GameDateilsHidden {
                    width: 100%;
                    height: 100%;
                    /*    height: 60vh;*/
                    overflow: hidden;

                    .GameDateilsHiddenBox {
                        height: 100%;
                        width: 100%;
                        overflow-y: scroll;
                        box-sizing: border-box;

                        .GameDateilsHiddenBoxFot {
                            margin-top: 10px;
                            padding-bottom: 10px;
                            border-bottom: 1px dashed #000;

                            .GameDateilsHiddenBoxFotTotal {
                                width: 100%;
                                display: grid;
                                grid-template-columns: repeat(2, 49%);

                                .GameDateilsHiddenBoxFotTitle {}
                            }


                        }

                        & :last-child {
                            border-bottom: none;
                        }
                    }
                }

                .ItemCodex {
                    padding: 10px;
                    height: 100%;

                    .ItemCodexHeat {
                        height: 10%;

                        input {
                            background: #eee;
                            color: #000;
                            height: 30px;
                            padding: 0 10px;
                            box-sizing: none;
                        }
                    }

                    .CustomBackpackBoxHeaderContent {
                        padding: 10px;
                        height: 80%;

                        .CustomBackpackBoxHeaderContentBox {
                            height: 100%;
                            overflow: hidden;
                            width: 100%;

                            .CustomBackpackBoxHeaderContentBoxConenten {
                                height: 100%;
                                overflow-y: scroll;
                                position: relative;

                                --BackpackItemPopupWidht: v-bind(BackpackItemPopupWidht);
                                --BackpackItemPopupTop: v-bind(BackpackItemPopupTop);
                                --BackpackItemPopupLeft: v-bind(BackpackItemPopupLeft);

                                .BackpackItemPopup {
                                    position: absolute;
                                    background: #fff;
                                    border: 1px dashed #000;
                                    width: var(--BackpackItemPopupWidht);
                                    padding: 6px;
                                    box-sizing: border-box;
                                    left: var(--BackpackItemPopupLeft);
                                    top: var(--BackpackItemPopupTop);
                                }

                                .BackpackItemBox {
                                    border: 1px solid #888;
                                    height: 50px;
                                    user-select: none
                                }

                                .BorderColor {
                                    border: 1px solid red;
                                }
                            }

                            .overflowHidden {
                                width: calc(100% + 18px);
                            }



                        }

                    }
                }
            }
        }
    }



}

.CustomBackpack {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 100;
    padding: 10px;
    box-sizing: border-box;

    .CustomBackpackBox {
        width: 80%;
        height: 80%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: #fff;
        color: #000;
        padding: 10px;
        box-sizing: border-box;

        .CustomBackpackBoxHeader {
            display: flex;
            justify-content: space-between;
            border-bottom: 1px solid #888;

            span {
                color: red;
            }

            input {
                background: #eee;
                border: 1px solid #000;
                outline: none;
                color: #000;
                padding: 4px;
                box-sizing: border-box;
                width: 40%;
                height: 20px;


            }
        }

        .CustomBackpackBoxHeaderContent {
            border-bottom: 1px solid #888;
            height: 70%;
            width: 100%;
            padding: 4px;
            box-sizing: border-box;

            .CustomBackpackBoxHeaderContentBox {
                height: 100%;
                overflow: hidden;
                width: 100%;

                .CustomBackpackBoxHeaderContentBoxConenten {
                    .Name {
                        position: relative;
                        height: 100%;
                        box-sizing: border-box;

                        .span {
                            position: absolute;
                            right: 2px;
                            bottom: -2px;
                        }

                        .Use {
                            position: absolute;
                            left: 50%;
                            bottom: 0%;
                            transform: translate(-50%, 50%);
                            background: #fff;
                            cursor: pointer;
                        }
                    }

                    position: relative;

                    --BackpackItemPopupWidht: v-bind(BackpackItemPopupWidht);
                    --BackpackItemPopupTop: v-bind(BackpackItemPopupTop);
                    --BackpackItemPopupLeft: v-bind(BackpackItemPopupLeft);

                    .BackpackItemPopup {
                        position: absolute;
                        background: #fff;
                        border: 1px dashed #000;
                        width: var(--BackpackItemPopupWidht);
                        padding: 6px;
                        box-sizing: border-box;
                        left: var(--BackpackItemPopupLeft);
                        top: var(--BackpackItemPopupTop);
                    }

                    .BackpackItemBox {
                        border: 1px solid #888;

                        user-select: none
                    }

                    .BorderColor {
                        border: 1px solid red;
                    }
                }

                .overflowHidden {
                    width: calc(100% + 18px);
                }



            }

        }

        .CustomBackpackBoxFooter {
            /*  padding: 10px;*/
            height: 10%;
            overflow: hidden;

            .CustomBackpackBoxFooterBox {
                overflow-y: auto;
                height: 100%;
            }

            button {
                background: #aaa;
                /*      */
                margin: 4px;
            }

            .buttonColor {
                border: 1px solid red;
            }
        }
    }
}

.Item {
    box-sizing: border-box;
    cursor: pointer;

    .ItemBox {
        text-align: center;

        img {
            width: 30px;
            height: 30px;
        }

        p {
            margin: 0;
        }
    }
}


.GameDateilsHidden {
    min-height: 100px;
    text-indent: 2em;
    letter-spacing: 2px;
}

.Experience {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;

    #yin-yang {
        --TotalwidthHeart: v-bind(TotalwidthHeart);
        --widthborder: v-bind(widthborder);
        --widthHeart: v-bind(widthHeart);
        --widthHeart1: v-bind(widthHeart1);
        --widthHeart2: v-bind(widthHeart2);
        --Heightwindow: v-bind(Heightwindow);
        width: var(--TotalwidthHeart);
        height: var(--TotalwidthHeart);
        background: #e1e1e1;
        border: var(--widthborder) solid #b4b4b4;
        /*  border-bottom: var(--widthHeart) solid #b4b4b4;*/
        border-radius: 100%;
        box-sizing: border-box;
        position: relative;
        margin: 0 auto;
        /* overflow: hidden;*/
        overflow: hidden;

        .semicircle {
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 50%;
            border-bottom: var(--widthHeart) solid #b4b4b4;
            z-index: 1;
        }

        &::after {
            content: "";
            width: var(--widthHeart1);
            height: var(--widthHeart1);
            background: #b4b4b4;
            border-radius: 100%;
            border: var(--widthHeart2) solid #e1e1e1;
            box-sizing: border-box;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            right: 0;
            z-index: 2;
        }

        &::before {
            content: "";
            width: var(--widthHeart1);
            height: var(--widthHeart1);
            background: #e1e1e1;
            border-radius: 100%;
            border: var(--widthHeart2) solid #b4b4b4;
            box-sizing: border-box;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            left: 0;
            z-index: 2;
        }

        .heartTtile {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            z-index: 4;
        }

        .heartColor {
            position: absolute;
            width: 200%;
            height: 200%;
            left: -50%;
            top: calc(110% - var(--Heightwindow));
            z-index: 3;
            background: rgba($color: rgb(43, 0, 255), $alpha: 0.6);
            border-radius: 40%;
            bottom: 0;
            transform-origin: 50% 50%;

            animation: identifier 10s ease-in-out infinite;
            /*   animation: identifier 6s ease-in-out infinite;
                        height: var(--Heightwindow);           */
        }

        @keyframes identifier {
            100% {
                transform: rotate(360deg);
            }
        }

    }

}







.figure {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid red;
    padding: 10px;

    .figureSh {
        span {
            display: inline-block;
            text-align: center;
        }
    }
}</style>